import ChildrenEcharts from "./components/ChildrenEcharts";
import RainEcharts from "./components/RainEcharts";
import titleicon from "./images/titleicon.png";
const EchartsBox = {
  border: "1px solid #1b232e",
  padding: "8px 5px",
};
const titleText = {
  fontSize: "14px",
  letterSpacing: "0.5em", // 增加字符间距
  color: "#5a627f",
  background: "#0f1c3c",
  fontWeight: "normal",
  marginTop: "10px",
  marginBottom: "10px",
  opacity: 0.8, // 略微降低不透明度使其看起来更柔和
};
const realTitle = {
  fontSize: "16px",
  color: "#eff4ff",
};
function EchartsRight(props) {
  const airData = props.airData;
  // 给新键赋值
  airData["PM25"] = airData["PM2.5"];
  const { SO2, PM10, O3, NO2, PM25 } = airData;

  return (
    < div >
      <div style={realTitle}>
        <img
          src={titleicon}
          alt=""
          style={{ width: "12px", height: "12px", marginRight: "10px" }}
        />
        实时监测 <span style={{ fontSize: "10px" }}>REAL-TIME MONITORING</span>
      </div>
      <div>
        <div style={titleText}> 空气中颗粒物含量浓度</div>
        <div style={EchartsBox}>
          <ChildrenEcharts
            unit={'μg/m3'}
            label={"pm2.5"}
            graphic="graphic1"
            airvalue={PM25}
          />
        </div>
        <div style={EchartsBox}>
          <ChildrenEcharts
            unit={'μg/m3'}
            label={"pm10"}
            graphic="graphic1"
            airvalue={PM10}
          />
        </div>
      </div>

      <div>
        <div style={titleText}> 气体含量浓度</div>
        <div style={EchartsBox}>
          <ChildrenEcharts
          
            label={"二氧化硫(SO)"}
            unit={'μg/m3'}
            graphic="graphic2"
            airvalue={SO2}
          />
        </div>
        <div style={EchartsBox}>
          <ChildrenEcharts
            unit={'μg/m3'}
            label={"二氧化氮(NO)"}
            graphic="graphic2"
            airvalue={NO2}
          />
        </div>
        <div style={EchartsBox}>
          <ChildrenEcharts
            unit={'μg/m3'}
            label={"臭氧(O3)"}
            graphic="graphic2"
            airvalue={O3}
          />
        </div>
        <div style={EchartsBox}>
          <ChildrenEcharts
             unit={'μg/m3'}
            label={"一氧化氮(NO)"}
            graphic="graphic2"
            airvalue={O3}
          />
        </div>
      </div>

      <div>
        <div style={titleText}>气压</div>
        <div style={EchartsBox}>
          <ChildrenEcharts
              unit={'hPa'}
            label={"气压"}
            graphic="graphic3"
            airvalue={50}
          />
        </div>
      </div>

      <div>
        <div style={titleText}> 降雨量</div>
        <RainEcharts />
      </div>
      </div>
  );
}
export default EchartsRight;

